<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>证券信息设置</title>
    <!--导入layui包-->
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../jQuery/jquery-1.11.2.js"></script>
    <script src="../layui/layui.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/font.css">
    <style>::-webkit-scrollbar{display: none;}</style>
</head>
<body>
<blockquote class="layui-elem-quote news_search">
<!--数据表格-->
<table class="layui-hide" id="seinfoTable" lay-filter="seinfoList"></table>

<script type="text/html" id="seinfo_search">
    <!--多条件查询层-->
    <div  class="layui-input-inline"  style="float: left">
        <form class="layui-form layui-col-md12 x-so" >
            交易所名称：
            <div class="layui-input-inline">
                <select  name="breedRateId" id="jys">
            </select></div>
            证券名称：
            <div class="layui-input-inline">
                <input type="text" name="seName" id="seName" placeholder="请输入证券名称" autocomplete="off" class="layui-input"/>
            </div>

            <button  class="layui-btn layui-btn-primary layui-bg-gray" lay-submit lay-filter="provinceSearch" >
                <i class="layui-icon">&#xe615;</i>
            </button>
        </form>
    </div>
    <!--头部按钮-->
    <div class="layui-btn-container layui-input-inline" style="margin-left: 150px">
        <button class="layui-btn layui-btn-danger" lay-event="batchDel">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <button class="layui-btn layui-btn-normal" lay-event="add">
            <i class="layui-icon">&#xe654;</i>添加
        </button>
    </div>
    <!--多条件查询结束-->
</script>
<!-- 行中操作按钮[仅对本行操作] -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal layui-icon layui-icon-edit" lay-event="update">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-icon layui-icon-delete" lay-event="delete">删除</a>
</script>

<!-- 添加/修改界面开始 -->
<div id="data-main" style="display: none;">
    <div style="margin-left: 120px;margin-top: 20px">
        <form class="layui-form" id="bondForm" method="post" lay-skin="line" lay-filter="bondFormTest">
            <div class="layui-form-item">
                <div class="layui-inline">
                <label class="layui-form-label">证券编号</label>
                <div class="layui-input-inline">
                    <input name="seId" lay-verify="required" placeholder="请输入证券编号" autocomplete="off" class="layui-input"/>
                </div>
                </div>

                <div class="layui-inline">
                <label class="layui-form-label">证券名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="seName" lay-verify="required" placeholder="请输入证券名称" autocomplete="off" class="layui-input"/>
                </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                <label class="layui-form-label layui-icon">证券类型</label>
                <div class="layui-input-inline">
                    <select name="seType" class="layui-inline">
                        <option value=''>---请选择---</option>
                        <option value="2">债券</option>
                        <option value="1">股票</option>
                    </select>
                </div>
                </div>
                <div class="layui-inline">
                <label class="layui-form-label" >发行日期</label>
                <div class="layui-input-inline" >
                    <input type="date" name="issueDate" lay-verify="required" placeholder="请输入发行日期" autocomplete="off" class="layui-input"/>
                </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                <label class="layui-form-label" >延迟日期</label>
                <div class="layui-input-inline" >
                    <input type="date" name="delayDate" lay-verify="required" placeholder="请输入延迟日期" autocomplete="off" class="layui-input"/>
                </div>
                </div>

                <div class="layui-inline">
                <label class="layui-form-label layui-icon">股票板块</label>
                <div class="layui-input-inline">
                    <select name="stockId" id="gq" class="layui-inline">
                    </select>
                </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label layui-icon">交易所ID</label>
                <div class="layui-input-inline">
                    <select name="breedRateId" id="jy" class="layui-inline">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-col-md4 layui-col-md-offset4">
                    <button class="layui-btn layui-bg-blue" lay-submit lay-filter="formSave">保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 添加/修改界面结束 -->

<!--脚本代码-->
<script type="text/javascript">
    layui.use(['table','layer','form','laypage','util','jquery'],function () {
        //导入模块并得到模块对象
        var table = layui.table,//表格对象
            layer = layui.layer,//弹层对象
            form = layui.form,//表单对象
            laypage = layui.laypage,//分页组件
            $ = layui.jquery,//jquery对象
            util = layui.util;//工具对象
        var shuj="";
        var shujs="";
        var sj="";
        var sjs="";
        //渲染表格对象
        table.render({
            //id:"houseReload",//为多条件搜索重新加载使用
            elem: "#seinfoTable",//表格对象
            url:"/financial/securities",
            toolbar: "#seinfo_search",//表格上方普通工具栏
            //一页显示5条数据
            height:740,
            limit: 15,
            cols: [
                [
                    {checkbox: true},//开启多选框
                    {field: "seId", title: "证券编号", align: "center"},
                    {field: "seName", title: "证券名称", align: "center"},
                    {field: "seType",title: "证券类型",align: "center",templet:function (d) {
                            if(d.seType==2){
                                return "<span style='color: #9BCA63;'>债券</span>";
                            }else if (d.seType==1){
                                return "<span style='color: #f7a35c;'>股票</span>";
                            }
                        }},
                    {field: "breedRateId", title: "交易所ID", align: "center",templet:function (d) {
                            for (var i=0;i<shujs.length;i++){
                                if(d.breedRateId == shujs[i].breedRateId){
                                    return shujs[i].noeName;
                                }else if (d.breedRateId==-1){
                                    return "暂无:请通过修改选择";
                                }
                            }
                        }},
                    {field: "issueDate", title: "发行日期", align: "center"},
                    {field: "delayDate",title: "延迟日期",align: "center"},
                    {field: "stockId", title: "股票板块ID", align: "center",templet:function (d) {
                            for (var i=0;i<shuj.length;i++){
                                if(d.stockId == shuj[i].stockId){
                                    return shuj[i].stockName;
                                }else if (d.stockId==-1){
                                    return "暂无:请通过修改选择";
                                }
                            }
                        }},
                    {fixed:"right",title:"操作",width:160,align:"center",toolbar:"#barDemo"}
                ]
            ],

            parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                shuj=res.sr;
                sj="";
                sjs="";
                sj+="<option value='0'>--请选择--</option>";
                sjs+="<option value='0'>--请选择--</option>";
                for (var i=0;i<shuj.length;i++){
                    sj+="<option value='"+shuj[i].stockId+"'>"+shuj[i].stockName+"</option>";
                }
                shujs=res.ex;
                for (var i=0;i<shujs.length;i++){
                    sjs+="<option value='"+shujs[i].breedRateId+"'>"+shujs[i].noeName+"</option>";
                }
                $("#gq").html(sj);
                $("#jy").html(sjs);
                $("#jys").html(sjs);
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                }},
            page: true,
            //一页选择显示5或10条数据
            limits: [5, 10,20,30,50]
        });

        //监听添加或修改的提交操作
        //定义请求方式
        var method="";
        form.on('submit(formSave)',function (data) {
            //ajax提交数据
            $.ajax({
                type:method,//提交方式
                url:"/financial/securities",//后台控制器路径
                data:JSON.stringify(data.field),
                dataType:"text",
                contentType:"application/json;charset=utf-8",
                success:function (msg) {
                    layer.closeAll();
                    layer.msg(msg);
                    table.reload("seinfoTable");
                }
            });
            return false;
        });

        //表格头部工具栏事件代码，根据lay-event属性值判断执行相应的代码
        table.on('toolbar(seinfoList)', function(obj) {
            //检查表格选择操作状态
            var checkStatus = table.checkStatus(obj.config.id);
            //判断事件event值
            switch(obj.event) {
                //批量删除操作：删除选定的多行数据
                case "batchDel":
                    //获得选中的表格行
                    var data = checkStatus.data;
                    //判断是否大于0行
                    if(data.length>0){
                        layer.confirm('请确认是否真的删除?', function(index){
                            //获取所有选择的id
                            var Str="";

                            for (var i = 0; i < data.length; i++) {
                                Str = Str+data[i].seId+",";//累加字符
                            }
                            Str=Str.substring(0,Str.length-1);
                            layer.close(index);
                            //使用ajax删除选中的
                            $.ajax({
                                type: "delete",//提交方式为
                                url: "/financial/securities/"+Str,//后台Servlet路径
                                success: function(msg){
                                    layer.msg('删除成功');
                                    //重新加载表格数据
                                    table.reload('seinfoTable');
                                }
                            });
                        });
                    }else{
                        //没有选择数据行
                        layer.msg('你至少选一行！');
                    }
                    break;

                case 'add':
                    //请求方式为post
                    method="post";
                    //清空表单
                    $("#bondForm")[0].reset();
                    layer.open({
                        type:1,//外部页面为2，内部层1
                        anim: 1,
                        title:"<span style='color:white' ><i class='layui-icon'>&#xe6b2;</i>证券信息设置</span>",
                        area: ["60%","50%"],
                        shade: 0.4,
                        content:$("#data-main").html(),
                        skin: 'layui-layer-lan'
                    });
                    //将主键设置成允许修改[防止因先修改，后增加时，该字段被设置为只读]
                    $("input[name='seId']").prop("readonly",false);
                    break;
            }
        });

        var method="";
        //监听表格行工具(操作)事件
        table.on("tool(seinfoList)",function (obj) {
            //得到表格行数据
            var data=obj.data;
            //判断事件event值，与lay-event属性比较(使用switch或if梯形结构都可以,前面已经用过switch,此处使用if梯形结构)
            //判断是否为行修改操作
            if(obj.event == "update"){
                //将设置请求方式为put
                method="put";
                //设置界面信息
                layer.open({
                    type: 1,
                    title:"<span style='color:white' ><i class='layui-icon'>&#xe6b2;</i>证券信息设置</span>",
                    area: ["60%","50%"],
                    shade: 0.4,
                    content: $("#data-main").html(),
                    skin: 'layui-layer-lan',
                    anim: 1,
                });
                //将当前行数据显示在表单各字段中
                form.val("bondFormTest", {
                    "seId":data.seId,
                    "seName":data.seName,
                    "seType":data.seType,
                    "breedRateId":data.breedRateId,
                    "issueDate":data.issueDate,
                    "delayDate":data.delayDate,
                    "stockId":data.stockId
                });
                //将主键设置成只读:不允许修改
                $("input[name='seId']").prop("readonly","readonly");
            }else if(obj.event == "delete"){//判断是否为行删除操作
                layer.confirm("真的删除证券编号为"+data.seId+"这行数据吗?", function(index){
                    //执行表格中删除操作
                    obj.del();
                    layer.close(index);
                    $.ajax({
                        type: "delete",
                        url: "/financial/securities/"+data.seId,//后台Servlet路径/Transcrud/Trans
                        success: function(msg){
                            //重新加载表格数据
                            table.reload('seinfoTable');
                            layer.msg(msg);
                        }
                    });
                });
            }
        });

        //搜索表单中提交按钮的事件代码
        form.on("submit(provinceSearch)",function (data) {
            //定义表单数据对象
            var formData=data.field;
            //得到表单数据json字符串
            var json=JSON.stringify(data.field);
            //alert(json);
            //重新加载表格对象
            table.reload("seinfoTable",{
                //页码
                page:{
                    curr:1
                },
                //条件数据，会带到后台
                where:{
                    seType: formData.seType,
                    seName: formData.seName
                }
            });
            return false;
        });

    });

</script>
</blockquote>
</body>
</html>